<template>
	<view class="poi" :style="selectedStyle" @click.native="onPoiItemClick">
		<view class="left">
			<view class="hj-normal-text">
				{{poi.title}}
			</view>
			<view class="hj-subtitle">
				{{poi.address}}
			</view>
		</view>
		<view class="right" v-show="poi.selected">
			<span class="iconfont icon-checkbox"></span>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			poi: {
				type: [String, Object]
			},
			primaryColor: {
				type: String,
				default: ()=>{
					return '#068888'
				}
			}
		},
		data() {
			return {
			}
		},
		computed: {
			selectedStyle(){
				if(this.poi.selected){
					return {
						// 'background-color': this.primaryColor,
						// color: '#ffffff'
						color: this.primaryColor
					}
				}else{
					return {}
				}
			}
		},
		created() {},
		methods: {
			onPoiItemClick() {
				console.log('onPoiItemClick', this.poi)
				this.$emit('selected', this.poi)
			},
		},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	@import "./iconfont.css";
	$hj-padding-v: 32rpx;
	.poi {
		padding-bottom: $hj-padding-v/2;
		margin: $hj-padding-v/2 0;
		border-bottom: 0.5rpx solid #D3D3D3;
		display: flex;
		justify-content: space-between;

		.right {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
